<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>v-for案例</title>

    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: "#app",
                data: {
                    address: "北京",
                    name: "张三",
                    age: 20,
                    person: {
                        name: "jack",
                        age: 18,
                        salary: 1100
                    },
                    hobby: ["唱", "跳", "rap"],
                    url: "https://act.codeboy.com/"
                }
            });
        }
    </script>
</head>

<body>
    <div id="app">
        <p>地址:{{address}}</p>
        <p>姓名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>爱好:{{hobby}} , 个数:{{hobby.length}}</p>
        <p>数组的第一个元素:{{hobby[0]}} </p>
        <p>数组的第最后一个元素:{{hobby[2]}} </p>

        <!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
        <p v-for="o in hobby">{{o}}</p>
        <!-- o是数据,i是下标 -->
        <p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
        <p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>
    </div>
</body>

</html>